<template>
	<view id="tooltip" class="relative inline-flex item-center" style="cursor:pointer;">
		<slot></slot>
		<view v-if="show" class="absolute uni-bg-white radius-12 p-12 text-color-regular" style="z-index:20;max-width:80vw;width:max-content;" :style="initPlacement">
			<view v-if="placement && placement.includes('bottom')" :style="topTriangleStyle"></view>
			<view v-if="title || $slots.title" class="text-cut fs-16 font-normal leading-22 text-center">
				<slot name="title">
					{{title}}
					<view class="h-1 my-8" style="background:rgba(51, 51, 51, 0.30);"></view>
				</slot>
			</view>
			<view v-if="content || $slots.content" class="text-color-hint fs-12 font-normal leading-22">
				<slot name="content">
					{{content}}
				</slot>
			</view>
			<view v-if="placement && placement.includes('top')" :style="bottomTriangleStyle"></view>
		</view>
	</view>
</template>

<script setup>
	import { computed, getCurrentInstance, nextTick, onMounted, onUnmounted, ref, useSlots, watch } from 'vue'
	
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		placement: {
			type: String,
			default: 'left'
		},
		title: {
			type: String,
			default: ''
		},
		content: {
			type: String,
			default: ''
		}
	})
	
	const clickOutside = () => {
		// if (show.value) {
		// 	show.value = false
		// }
	}
	const instance = getCurrentInstance()
	const leftOffset = ref(0)
	const rightOffset = ref(0)
	const slotWidth = ref(0)
	const slotHeight = ref(0)
	
	const triangleWidth = 8
	const topTriangleStyle = computed(() => {
		if (props.placement.includes('left')) {
			// 三角形便左显示
			return {
				position: 'absolute',
				top: `-${triangleWidth * 2 - 1}px`,
				left: `${leftOffset.value + slotWidth.value / 2 + 1}px`,
				borderLeft: `${triangleWidth}px solid transparent`,
				borderRight: `${triangleWidth}px solid transparent`,
				borderTop: `${triangleWidth}px solid transparent`,
				borderBottom: `${triangleWidth}px solid #fff`,
			}
		} else if (props.placement.includes('right')) {
			// 三角形偏右显示
			return {
				position: 'absolute',
				top: `-${triangleWidth * 2 - 1}px`,
				right: `${slotWidth.value/2 + 1}px`,
				borderLeft: `${triangleWidth}px solid transparent`,
				borderRight: `${triangleWidth}px solid transparent`,
				borderTop: `${triangleWidth}px solid transparent`,
				borderBottom: `${triangleWidth}px solid #fff`,
			}
		} else {
			// 三角形居中显示
			return {
				position: 'absolute',
				top: `-${triangleWidth * 2 - 1}px`,
				left: `calc(50% - ${slotWidth.value/2}px)`,
				borderLeft: `${triangleWidth}px solid transparent`,
				borderRight: `${triangleWidth}px solid transparent`,
				borderTop: `${triangleWidth}px solid transparent`,
				borderBottom: `${triangleWidth}px solid #fff`,
			}
		}
	})
	
	const bottomTriangleStyle = computed(() => {
		if (props.placement.includes('left')) {
			// 三角形便左显示
			return {
				position: 'absolute',
				bottom: `-${triangleWidth * 2 - 1}px`,
				left: `${leftOffset.value + slotWidth.value / 2 + 1}px`,
				borderLeft: `${triangleWidth}px solid transparent`,
				borderRight: `${triangleWidth}px solid transparent`,
				borderTop: `${triangleWidth}px solid #fff`,
				borderBottom: `${triangleWidth}px solid transparent`,
			}
		} else if (props.placement.includes('right')) {
			// 三角形偏右显示
			return {
				position: 'absolute',
				bottom: `-${triangleWidth * 2 - 1}px`,
				right: `${slotWidth.value/2}px`,
				borderLeft: `${triangleWidth}px solid transparent`,
				borderRight: `${triangleWidth}px solid transparent`,
				borderTop: `${triangleWidth}px solid #fff`,
				borderBottom: `${triangleWidth}px solid transparent`,
			}
		} else {
			// 三角形居中显示
			return {
				position: 'absolute',
				bottom: `-${triangleWidth * 2 - 1}px`,
				left: `calc(50% - ${slotWidth.value/2}px)`,
				borderLeft: `${triangleWidth}px solid transparent`,
				borderRight: `${triangleWidth}px solid transparent`,
				borderTop: `${triangleWidth}px solid #fff`,
				borderBottom: `${triangleWidth}px solid transparent`,
			}
		}
	})
	
	const initPlacement = computed(() => {
		let style = {}
		switch (props.placement) {
			case 'left':
				style = {
					top: '50%',
					transform: 'translateY(-50%)',
					right: '100%',
					'margin-right': '10rpx',
				}
				break
			case 'right':
				style = {
					top: '50%',
					transform: 'translateY(-50%)',
					left: '100%',
					'margin-left': '10rpx',
				}
				break
			case 'top':
				style = {
					bottom: '100%',
					transform: 'translateX(-50%)',
					left: '50%',
					'margin-bottom': '10rpx',
				}
				break
			case 'bottom':
				style = {
					top: '100%',
					transform: 'translateX(-50%)',
					left: '50%',
					'margin-top': '10rpx',
				}
				break
			case 'bottom-left':
			case 'left-bottom':
				style = {
					top: '100%',
					'margin-top': '10rpx',
					left: `${leftOffset.value > 0 ? -(leftOffset.value + slotWidth.value / 2) : -(slotWidth.value/2)}px`,
				}
				break
			case 'bottom-right':
			case 'right-bottom':
				style = {
					top: '100%',
					'margin-top': '10rpx',
					right: `${-(slotWidth.value / 2)}px`,
				}
				break
		}
		return style
	})

	onMounted(() => {
		const query = uni.createSelectorQuery().in(instance)
		query.select('#tooltip').boundingClientRect(data => {
			// console.log('query', data)
			leftOffset.value = data.left
			rightOffset.value = data.right
			slotWidth.value = data.width
			slotHeight.value = data.height
		}).exec()
		uni.$on('clickOutside', clickOutside)
	})
	
	onUnmounted(() => {
		uni.$off('clickOutside', clickOutside)
	})
</script>
